<template>
  <div class="home-content">
    <!--左边栏-->
    <div class="left-panel" v-if="user && user.userId">
      <div class="user-wrapper">
        <div class="user-panel f-left">
          <div class="loading-content" style="display: none">
            <div class="loading-text tc-slate">
              <img src="//s1.hdslb.com/bfs/seed/bplus-common/dynamic-assets/loading.png" class="loading-img"
              ><span>loading...</span></div>
          </div>
          <div class="content">
            <div class="user-pic"></div>
            <router-link :to="'/personal?id='+user.userId" class="user-name tc-black c-pointer">{{
                user.nickName
              }}
            </router-link>
            <div class="bottom">
              <a class="number-part c-pointer f-left">
                <p class="numbers fs-14">12</p>
                <p class="text tc-slate fs-12 ls-0">关注</p>
              </a>
              <a class="number-part c-pointer f-left">
                <p class="numbers fs-14">0</p>
                <p class="text tc-slate fs-12 ls-0">粉丝</p>
              </a>
              <a class="number-part c-pointer f-left" @click="dongtaiClick">
                <p class="numbers fs-14">{{ userTrendsNumbber }}</p>
                <p class="text tc-slate fs-12 ls-0">动态</p>
              </a>
            </div>
            <router-link :to="'/personal?id='+user.userId">
              <!--              <img :src="avatar" class="user-head c-pointer">-->
              <el-image :src="avatar" class="user-head c-pointer" :lazy="true"></el-image>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!--右边栏-->
    <div class="center-panel">
      <!--发布动态-->
      <div class="section-block">
        <div class="publish-panel">
          <!--输入框-->
          <div class="editor">
            <div class="core-style">
              <el-input class="editor core-style" v-model="form.remark" type="textarea"
                        placeholder="有什么想和大家分享的？"
                        :maxlength="500" show-word-limit
                        :autosize="{minRows: 2, maxRows: 8}" :style="{width: '100%'}"
              >
              </el-input>
            </div>
          </div>
          <!--                  <ImageUpload :key="form.replyId" @imageUpload="imageUpload" :formImg="formImg"></ImageUpload>-->
          <!--发布选择-->
          <div class="toolbar">

            <!--左侧选择-->
            <div class="toolbar-box">
              <!--              <div class="bp-emoji-box-container toolbar-item">
                              <button title="表情" class="box-toggle emoji-btn"></button>
                            </div>-->

              <div class="image-box toolbar-item">
                <button style="margin-left: 0;" title="上传图片" class="box-toggle pic-box" @click="openUpload"></button>
                <div class="image-popup" v-if="showImgUpload">
                  <div class="static-popup upload-image-box bp-arrow" style="width: 290px;">
                    <div @click="closeUpload" title="放弃图片上传" class="bp-icon-font icon-group-dynamic close-btn"
                    ></div>
                    <div class="title">
                                  <span>图片上传
                                    <span class="d-i-block hint">{{ formImg.length }} / 9</span>
                                  </span>
                    </div>
                    <div class="content-ctnr">
                      <div class="upload-image-wrapper">
                        <div class="upload-image">
                          <div class="f-clear upload-list">
                            <ImageUpload :key="form.replyId" @imageUpload="imageUpload" :formImg="formImg"
                            ></ImageUpload>
                            <!--                                    <div class="f-left upload-btn b-box">
                                                                  <input type="file" accept="image/png, image/jpeg, image/jpg, image/gif"
                                                                         multiple="multiple" class="upload pointer"
                                                                  >
                                                                  <i class="bp-icon-font icon-add pointer"></i>
                                                                </div>-->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

            <!--发布按钮-->
            <div class="publish-launcher">
                      <span class="indicator" v-if="form.remark && form.remark.length>0">{{
                          form.remark.length
                        }}</span>
              <button @click="((form.remark && form.remark.trim().length>0) || formImg.length>0)?submitForm():''"
                      class="publish-btn d-i-block bp-v-middle"
                      :class="[((form.remark && form.remark.trim().length>0) || formImg.length>0)?'':'disabled']"
              >发布
              </button>
            </div>
          </div>

        </div>
      </div>

      <!--内容-->
      <div class="card-list">
        <!--动态选择-->
        <div class="most-viewed-panel">
          <svg viewBox="0 0 492 492" class="icon css-1dtzbno">
            <path
              d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"
            ></path>
          </svg>
          <div class="list-container">
            <div class="list-content" style="left: 0px;">
              <div class="most-viewed-item" @click="quanbuClick">
                <div class="section">
                  <div class="icon-all active">
                    <svg viewBox="0 0 24 24" class="icon css-1dtzbno">
                      <path
                        d="M12,1 C12.6032725,1 13.0923215,1.49015271 13.0923215,2.09478673 L13.0919415,7.34448672 C14.1405747,6.48008747 15.4863884,5.96064782 16.9538392,5.96064782 C20.299965,5.96064782 23.0136451,8.66144851 23.0136451,11.994424 C23.0136451,12.5976965 22.5234924,13.0867455 21.9188584,13.0867455 L21.9188584,13.0867455 L16.6490923,13.0860736 C17.5214136,14.1341909 18.0461608,15.4820004 18.0461608,16.9526066 C18.0461608,20.2931041 15.3385912,23 12,23 C11.3967275,23 10.9076785,22.5098473 10.9076785,21.9052133 L10.9076785,21.9052133 L10.9080585,16.6555133 C9.85942532,17.5199125 8.51361156,18.0393522 7.04616077,18.0393522 C3.70003499,18.0393522 0.986354862,15.3385515 0.986354862,12.005576 C0.986354862,11.4023035 1.47650758,10.9132545 2.08114159,10.9132545 L7.35090774,10.9139264 C6.47858642,9.86580905 5.95383923,8.51799956 5.95383923,7.04739336 C5.95383923,3.70689593 8.66140884,1 12,1 Z M13.0923215,13.2512833 L13.0923215,20.65393 C14.6933378,20.1831243 15.8615177,18.7037893 15.8615177,16.9526066 C15.8615177,15.2014239 14.6933378,13.7220889 13.0923215,13.2512833 L13.0923215,13.2512833 Z M10.7583198,13.0978976 L3.33400176,13.0978976 C3.80733493,14.6913696 5.28978206,15.8547091 7.04616077,15.8547091 C8.80253948,15.8547091 10.2849866,14.6913696 10.7583198,13.0978976 Z M16.9538392,8.14529092 C15.1974605,8.14529092 13.7150134,9.30863041 13.2416802,10.9021024 L13.2416802,10.9021024 L20.6659982,10.9021024 C20.1926651,9.30863041 18.7102179,8.14529092 16.9538392,8.14529092 Z M10.9076785,3.34607 C9.30666224,3.81687566 8.13848232,5.29621066 8.13848232,7.04739336 C8.13848232,8.79857607 9.30666224,10.2779111 10.9076785,10.7487167 L10.9076785,3.34607 Z"
                        id="合并形状" fill-rule="nonzero"
                      ></path>
                    </svg>
                  </div>
                </div>
                <div class="name active">全部动态</div>
              </div>
              <!--              <div class="most-viewed-item" @click="gerenClick(item1)" v-for="(item1,index1) in trendsPHList"
                                 :key="index1"
                            >
                              <div class="section">
                                <div class="avatar" :style="{backgroundImage:`url(${changeAvatar(item1.user.avatar)})`}">
                                  &lt;!&ndash;                    <div class="red-dot"></div>&ndash;&gt;
                                </div>
                              </div>
                              <div class="name">{{ item1.user.nickName }}</div>
                            </div>-->
            </div>
          </div>
          <svg viewBox="0 0 492 492" class="icon css-1dtzbno">
            <path
              d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"
            ></path>
          </svg>
        </div>

        <!--动态内容-->
        <div class="feed-card">
          <!--动态菜单栏-->
          <!--                  <div class="tab-bar">
                              <div class="tab"><a class="tab-text tc-slate selected">全部</a>
                              </div>
                              <div class="tab"><a class="tab-text tc-slate">投稿视频</a></div>
                              <div class="tab"><a class="tab-text tc-slate">追番追剧</a></div>
                              <div class="tab"><a class="tab-text tc-slate">专栏</a></div>
                              <div class="line" style="transform: translateX(20px);"></div>
                            </div>-->

          <!--动态内容 -->
          <div class="content">
            <!--新动态提示 -->
            <!--                    <div class="new-notice-bar c-pointer" v-if="total<=0">
                                  <p class="message" >

                                    空空如也
                                  </p>
                                </div>-->
            <div class="new-notice-bar c-pointer" style="background: #fff;height: 100%" v-if="total<=0">
              <p class="message" style="color: #656565;font-size: 14px">
                <img style="width: 100%;height: 100%" src="../../assets/images/user/zhanwu03.jpeg">
                空空如也
              </p>
            </div>

            <!--动态内容 -->
            <div v-for="(item,index) in trendsList" :key="index">
              <div class="card" style="margin-top: 8px;">
                <a @click="btnClick('user',item)"
                   class="user-head c-pointer avatar-comp" href="javascript:void(0)"
                >
                  <div class="bili-avatar">
                    <img class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                         :src="changeAvatar(item.user.avatar)" :alt="item.user.nickName"
                         :lazy="true"
                    >
                  </div>
                </a>
                <div class="main-content" style="padding-bottom: 0px;">
                  <div class="user-name fs-16 ls-0 d-i-block">
                    <a @click="btnClick('user',item)" href="javascript:void(0)" class="c-pointer"
                    >{{ item.user.nickName }}</a>
                  </div>
                  <div class="time fs-12 ls-0 tc-slate">
                    <a @click="btnClick('edit',item)" href="javascript:void(0)"
                       class="detail-link tc-slate"
                    >{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</a><span></span>
                  </div>

                  <div class="card-content" style="position: relative;">
                    <div class="post-content">
                      <div class="original-card-content">
                        <div class="text p-rel description active" @click="btnClick('edit',item)">
                          <div class="content">
                            <div class="content-full" v-if="!item.remark">分享图片</div>
                            <div v-else class="content-full" v-html="formatSolution(item.remark)"></div>
                            <!--                            <div style="padding-top: 10px;" v-if="item.img && item.img.length>0"
                                                             v-for="(itemImg,indexImg) in item.img"
                                                             :key="indexImg"
                                                        >
                                                          <img style="width: 100%;height: 100%" :src="changeUrl(itemImg.fileName)">
                                                        </div>-->
                          </div>
                        </div>
                        <div class="imagesbox">
                          <div class="zoom-wrap" v-if="item.img && item.img.length>0">
                            <ul class="zoom-list list-none zoom-1" v-if="item.img.length===1">
                              <li class="card111 card-1" v-for="(itemImg,indexImg) in item.img"
                                  :key="indexImg"
                              >
                                <el-image class="img-content" :lazy="true"
                                          style="width: 240px; height: 240px;"
                                          :preview-src-list="item.srcList"
                                          :src="changeUrl(itemImg.fileName)"
                                ></el-image>
                                <!--                                <div class="img-content"
                                                                     style="width: 240px; height: 240px;"
                                                                     :style="{backgroundImage:`url(${changeUrl(itemImg.fileName)})`}"
                                                                ></div>-->
                              </li>
                            </ul>
                            <ul class="zoom-list list-none zoom-3" v-if="item.img.length>1">
                              <li class="card111 card-3" v-for="(itemImg,indexImg) in item.img"
                                  :key="indexImg"
                              >
                                <el-image class="img-content" :lazy="true"
                                          :preview-src-list="item.srcList"
                                          :src="changeUrl(itemImg.fileName)"
                                ></el-image>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!--点赞评论按钮 -->
                  <div class="button-bar tc-slate">
                    <!--                            <div class="single-button c-pointer">
                                                    <span class="text-bar">
                                                      <i class="bp-svg-icon single-icon transmit"></i>
                                                      <span class="text-offset">转发</span>
                                                    </span>
                                                </div>-->
                    <div class="single-button c-pointer">
                                <span :class="[item.showReplyList?'selected':'']" class="text-bar"
                                      @click="btnClick('reply',item)"
                                >
                                  <i :class="[item.showReplyList?'comment-hover':'comment']"
                                     class="bp-svg-icon single-icon"
                                  ></i>
                                  <span class="text-offset">{{ item.reply }}</span>
                                </span>
                    </div>
                    <div class="single-button c-pointer p-rel">
                                <span class="text-bar">
                                  <i class="bp-svg-icon single-icon zan"></i>
                                  <span class="text-offset">{{ item.fabulous }}</span>
                                </span>
                    </div>
                  </div>
                </div>

                <!--投诉、举报】删除按钮 -->
                <div class="button-area c-pointer" style="height: 35px"
                     @mouseover="subsOpen('trends',item)"
                     @mouseleave="subsStop('trends',item)"
                >
                  <div class="more-button bp-icon-font icon-more-1">
                    <div v-if="item.user.userId==user.userId"
                         style="-webkit-text-stroke-width: 0px;top: 24px;right: -10px"
                         class="more-panel fs-14 ls-0" :style="{'display':item.showPoints?'block':'none'}"
                    >
                      <p @click="btnClick('del',item)" class="child-button c-pointer">删除</p>
                    </div>
                    <div v-else style="-webkit-text-stroke-width: 0px;top: 24px;right: -10px"
                         class="more-panel fs-14 ls-0" :style="{'display':item.showPoints?'block':'none'}"
                    >
                      <p @click="btnClick('guanzhu',item)" class="child-button c-pointer">取消关注</p>
                      <p @click="btnClick('jubao',item)" class="child-button c-pointer">举报</p>
                    </div>
                  </div>
                  <!--                          <el-popover
                                              placement="bottom-end"
                                              width="94"
                                              trigger="click">
                                              <div class="more-panel fs-14 ls-0">
                                                <p class="child-button c-pointer">取消关注</p>
                                                <p class="child-button c-pointer">举报</p>
                                              </div>
                                              <div class="more-button bp-icon-font icon-more-1" slot="reference"></div>
                                            </el-popover>-->
                </div>

                <!--评论内容 -->
                <div class="pinglun_class" v-if="item.showReplyList">
                  <div class="panel-area" style="position: relative;">
                    <div class="bb-comment ">
                      <div class="reply-notice"></div>
                      <!--                              <div class="comment-header clearfix">
                                                      <div class="tabs-order">
                                                        <ul class="clearfix">
                                                          <li class="default-sort" data-sort="0">全部评论</li>
                                                          <li data-sort="2" class="hot-sort  on">按热度排序</li>
                                                          <li data-sort="0" class="new-sort" style="display: list-item;">按时间排序</li>
                                                        </ul>
                                                      </div>
                                                      <div class="header-interaction"></div>
                                                    </div>-->
                      <div class="comment-send ">
                        <div class="user-face" v-if="user && user.userId">
                          <el-image :lazy="true" class="user-head2" :src="avatar"></el-image>
                          <!--                          <img class="user-head2" :src="avatar">-->
                        </div>
                        <div class="user-face" v-else>
                          <img class="user-head2" src="../../assets/images/logo/icon-unlogin.png">
                        </div>
                        <div class="textarea-container">
                          <i class="ipt-arrow"></i>
                          <el-input v-model="replyForm.remark" type="textarea"
                                    placeholder="发一条友善的评论"
                                    :maxlength="500" show-word-limit
                                    :autosize="{minRows: 2.5, maxRows: 8}"
                                    :style="{width: '100%'}"
                          >
                          </el-input>
                          <button
                            @click="(replyForm.remark && replyForm.remark.trim().length>0)?submitFormReply(item):''"
                            :class="[(replyForm.remark && replyForm.remark.trim().length>0)?'':'disabled']"
                            type="button" class="comment-submit"
                          >发表评论
                          </button>
                        </div>
                        <!--                        <div class="comment-emoji">
                                                  <i class="face"></i>
                                                  <span class="text">表情</span>
                                                </div>
                                                <div class="dynamic-repost">
                                                  <label>
                                                    <input type="checkbox" class="dynamic-repost-checkbox">
                                                    <span>同时转发到我的动态</span>
                                                  </label>
                                                </div>-->
                      </div>
                      <div class="comment-list has-limit" v-for="(itemReply,indexReply) in replyList"
                           :key="indexReply"
                      >
                        <div class="list-item reply-wrap ">
                          <div class="user-face">
                            <a href="javascript:void(0)" @click="btnClick('userRely',itemReply)">
                              <div class="bili-avatar">
                                <img width="48" height="48"
                                     class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                                     :src="changeAvatar(itemReply.fromUser.avatar)"
                                     :lazy="true"
                                >
                                <span class="bili-avatar-icon"></span>
                              </div>
                            </a>
                          </div>
                          <div class="con ">
                            <div class="user">
                              <a href="javascript:void(0)" @click="btnClick('userRely',itemReply)" class="name"
                                 style="color: #FB7299;"
                              >{{ itemReply.fromUser.nickName }}</a>
                              <!--                                      <a class="level-link" href="javascript:void(0)">
                                                                      <i class="level l3"></i>
                                                                    </a>-->
                            </div>
                            <p class="text" v-html="formatSolution(itemReply.remark)">{{ itemReply.remark }}</p>
                            <div class="info">
                                      <span class="time">{{
                                          parseTime(itemReply.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
                                        }}</span>
                              <!--                              <span class="like "><i></i><span></span></span>
                                                            <span class="hate "><i></i></span>
                                                            <span class="reply btn-hover">回复</span>-->
                              <div class="operation more-operation">
                                <div class="spot"
                                     @mouseover="subsOpen('reply',itemReply)"
                                     @mouseleave="subsStop('reply',itemReply)"
                                >
                                  <div class="opera-list" v-if="itemReply.action">
                                    <ul v-if="itemReply.fromUser.userId==user.userId">
                                      <li class="blacklist" @click="btnClick('delReply',itemReply,item)">删除</li>
                                    </ul>
                                    <ul v-else>
                                      <li class="report">举报</li>
                                    </ul>
                                  </div>
                                </div>

                              </div>
                            </div>
                            <div class="reply-box"></div>
                            <div class="paging-box"></div>
                          </div>
                        </div>
                      </div>
                      <div class="bottom-page paging-box-big center">没有更多了～</div>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <!--加载更多 -->
            <!--                    <div class="div-load-more tc-slate">
                                  <div class="load-more">
                                    <span data-v-b6994470="">加载更多</span>
                                  </div>
                                </div>-->
          </div>
        </div>
      </div>
    </div>

    <div class="im-popup report-popup" v-if="open">
      <div class="bp-popup-panel p-relative a-move-in-top a-forwards im-popup-shell" style="width: 500px;">
        <div class="title-ctnr p-relative">
          <h2 class="popup-title">我要举报</h2>
        </div>
        <div class="popup-content-ctnr">
          <div class="content">
            <div class="content-text">请选择举报的理由：</div>
            <div class="selector-box">
              <label class="type-selector" v-for="(item,index) in radioList" :key="index">
                <input v-model="picked" :value="item.value" :name="item.name" type="radio" class="radio">
                <span class="radio-selected" v-if="picked==item.value"></span>
                <span class="radio-default" v-else></span>
                {{ item.title }}
              </label>
            </div>
            <div>选中：{{ picked }}</div>
            <div class="report-tip" v-if="picked===0">为帮助审核人员更快处理，请补充问题类型等详细信息</div>
            <div class="input-box" v-if="picked===0">
              <el-input v-model="jubaoText" type="textarea" placeholder="请输入举报内容" :maxlength="50" show-word-limit
                        :autosize="{minRows: 4, maxRows: 8}" :style="{width: '100%'}"
              ></el-input>
            </div>
          </div>
          <div class="popup-btn-ctnr t-center">
            <button @click="(picked==null || (picked===0 && jubaoText.length<=0))?'':jbClick()"
                    :disabled="(picked==null || (picked===0 && jubaoText.length<=0))?true:false"
                    class="bl-button panel-btn bl-button--primary bl-button--size"
            >
              <span class="txt">确定</span>
            </button>
            <button @click="close" class="bl-button panel-btn bl-button--ghost bl-button--size">
              <span class="txt">取消</span>
            </button>
          </div>
        </div>
        <div @click="close" title="关闭面板" class="close-btn p-absolute bg-center bg-no-repeat pointer t-center">
          <i class="bp-icon-font icon-close"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { listTrends, addTrends, delTrends, updateReplyNumberDel, updateReplyNumber } from '@/api/trends'
import { listReply, getReply, addReply, delReply } from '@/api/plainReply'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { addMessage } from '@/api/message'

export default {
  name: 'list',
  components: { ImageUpload },
  inject: ['reload'],  //注入依赖
  data() {
    return {
      img: require('../../assets/images/profile.jpg'),
      showImgUpload: false,
      count: 10,
      picked: null,
      jubaoText: '',
      formImg: [],
      radioList: [
        { id: 1, value: 1, name: 'report-type', title: '垃圾广告' },
        { id: 2, value: 2, name: 'report-type', title: '话题不相关' },
        { id: 3, value: 3, name: 'report-type', title: '色情' },
        { id: 4, value: 4, name: 'report-type', title: '人身攻击' },
        { id: 5, value: 5, name: 'report-type', title: '违法信息' },
        { id: 0, value: 0, name: 'report-type', title: '其他' }
      ],
      loading: false,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        status: '0'
      },
      replyList: [],
      open: false,
      trendsList: [],
      trendsPHList: [],
      total: 0,
      userTrendsNumbber: 0,
      form: {},
      replyForm: {},
      rules: {
        remark: [
          { required: true, message: '动态内容不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user', 'avatar'
    ])
  },
  created() {
    this.getList()
    this.getPaihang()
  },
  methods: {
    gerenClick(val) {
      this.queryParams.userId = val.user.userId
      this.getList()
    },
    getPaihang() {
      let queryParams = {
        // pageNum: 1,
        // pageSize: 10,
        status: '0',
        orderByColumn: 'reply',
        isAsc: 'desc'
      }
      listTrends(this.queryParams).then(response => {
        this.trendsPHList = response.rows.filter(item => {
          return item.userId != this.user.userId
        })
      })
    },
    //图片上传返回的数据
    imageUpload(val) {
      this.formImg = val
      this.form.img = JSON.stringify(val)
    },
    quanbuClick() {
      this.queryParams.userId = undefined
      // this.getList()
      this.$router.go(0)
    },
    dongtaiClick() {
      this.queryParams.userId = this.user.userId
      this.getList()
      // this.reload()
      // this.$router.go(0);
    },
    /** 查询动态列表 */
    async getList() {
      await listTrends(this.queryParams).then(response => {
        this.trendsList = response.rows
        this.trendsList.map(item => {
          item.img = this.change(item.img)
          item.srcList = []
          item.img.map(item2 => {
            item.srcList.push(this.changeUrl(item2.fileName))
          })
          // item.showPoints = false
        })
        this.total = response.total
      })
      if (getToken()) {
        let query = {
          status: '0',
          userId: this.user.userId
        }
        listTrends(query).then(res => {
          this.userTrendsNumbber = res.total
        })
      }
    },
    getReplyList(val) {
      let params = {
        // pageNum: 1,
        // pageSize: 10,
        contentId: val,
        status: '0'
      }
      listReply(params).then(response => {
        this.replyList = response.rows
        // this.total = response.total
      })
    },

    /*inputClick(val) {
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
        })
      }
      return
    },*/
    /** 发布动态提交按钮 */
    submitForm() {
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
          this.form = {}
          this.formImg = []
        })
        return
      }
      if ((this.form.remark && this.form.remark.length > 0) || this.formImg.length > 0) {
        this.form.userId = JSON.parse(JSON.stringify(this.user.userId))
        addTrends(this.form).then(response => {
          this.msgSuccess('发布成功')
          this.showImgUpload = false
          this.form = {}
          this.formImg = []
          this.getList()
        })
      }
    },
    openUpload() {
      this.showImgUpload = !this.showImgUpload
    },
    closeUpload() {
      this.showImgUpload = false
      this.formImg = []
    },

    //发布评论
    submitFormReply(val) {
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
          this.replyForm = {}
        })
        return
      }
      if (this.replyForm.remark && this.replyForm.remark.length > 0) {
        this.replyForm.fromId = JSON.parse(JSON.stringify(this.user.userId))
        this.replyForm.contentId = JSON.parse(JSON.stringify(val.trendsId))
        addReply(this.replyForm).then(response => {
          this.msgSuccess('评论成功')
          this.replyForm = {}
          this.getReplyList(val.trendsId)
          updateReplyNumber(val.trendsId)
          if (val.user.userId == this.user.userId) {
            return
          }
          let message = {
            fromId: this.user.userId,
            fromName: this.user.nickName,
            toId: val.user.userId,
            toName: val.user.userName,
            messageTitle: '动态',
            identity: '1',
            type: '1',
            payload: JSON.stringify(val),
            messageContent: '回复了你的动态'
          }
          addMessage(message)
        })
      }
    },
    jbClick() {

    },
    subsOpen(e, val) {
      if (e == 'trends') {
        this.trendsList.map(item => {
          this.$set(item, 'showPoints', false)
        })
        this.$set(val, 'showPoints', true)
      } else if (e == 'reply') {
        this.replyList.map(item => {
          this.$set(item, 'action', false)
        })
        this.$set(val, 'action', true)
      }

    },
    subsStop(e, val) {
      if (e == 'trends') {
        this.$set(val, 'showPoints', false)
      } else if (e == 'reply') {
        this.$set(val, 'action', false)
      }

    },

    btnClick(e, val, data) {
      if (e == 'del') {
        this.$confirm('确定要删除此条动态吗？', '删除动态', {
          cancelButtonText: '我点错了',
          confirmButtonText: '删除',
          type: 'warning'
        }).then(function() {
          return delTrends(val.trendsId)
        }).then(() => {
          this.getList()

          this.msgSuccess('删除成功')
        })
      } else if (e == 'delReply') {
        this.$confirm('确定要删除此条评论吗？', '删除评论', {
          cancelButtonText: '我点错了',
          confirmButtonText: '删除',
          type: 'warning'
        }).then(function() {
          return delReply(val.replyId)
        }).then(() => {
          this.getReplyList(data.trendsId)
          updateReplyNumberDel(data.trendsId)
          this.msgSuccess('删除成功')
        })
      } else if (e == 'jubao') {
        this.open = true
      } else if (e == 'reply') {
        if (val.showReplyList) {
          this.$set(val, 'showReplyList', false)
        } else {
          this.$set(val, 'showReplyList', true)
        }
        this.trendsList.map(item => {
          if (item.trendsId !== val.trendsId) {
            this.$set(item, 'showReplyList', false)
          }
        })
        // this.$set(val, 'showReplyList', true)
        this.getReplyList(val.trendsId)
      } else if (e == 'edit') {
        this.$router.push({
          path: '/trends/edit',
          query: {
            id: val.trendsId
          }
        })
      } else if (e == 'user') {
        this.$router.push({
          path: '/personal',
          query: {
            id: val.userId
          }
        })
      } else if (e == 'userRely') {
        this.$router.push({
          path: '/personal',
          query: {
            id: val.fromId
          }
        })
      }
    },
    close() {
      this.open = false
      this.picked = null
      this.jubaoText = ''
    },

    load() {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.trendsList = this.trendsList.slice(0, this.count)
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index";
@import "./reply";
</style>
<style scoped>
/deep/ .el-image__preview {
  cursor: zoom-in;
}

/deep/ .el-textarea__inner {
  width: 100%;
  min-height: 22px;
  max-height: 300px;
  letter-spacing: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: pre-wrap;
  color: #222;
  background-color: #fff;
  font-size: 14px;
  vertical-align: baseline;
  outline: none;
  line-height: 22px;
  border-radius: 4px;
  word-break: break-word;
  word-wrap: break-word;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
</style>
